<!--  -->
<script setup>
defineProps(['info', 'data'])
import { getUsernameStyleByRole } from '@/utils/misc'
</script>

<template>
  <div class="profile-container">
    <div v-if="!data.avatar" class="avatar">{{ data.displayName[0].toUpperCase() }}</div>
    <img v-else class="avatar" :src="data.avatar" />
    <div class="info">
      <RouterLink :to="`/users/${data.username}`">
        <div class="username" :style="getUsernameStyleByRole(data.roles)">{{ data.displayName }}</div>
      </RouterLink>
      <div>{{ info }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.profile-container {
  display: flex;
  align-items: center;
  margin-bottom: .5em;
  color: grey;
  width: 200px;

  .username:hover {
    color: red;
  }

  .avatar {
    border: 1px solid var(--border-secondary);
    width: 40px;
    height: 40px;
    border-radius: 10%;
    object-fit: cover;
    background-color: var(--bgc-secondary);
    margin-right: .5em;
    color: rgb(0, 105, 70);
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
